<template>
  <lls-dialog
    title="实体详情"
    :visible="visible"
    width="500px"
    @close="handleClose"
    :close-on-click-modal="false">
    <div class="content">
      <div class="item">
        <div class="label">文本内容</div>
        <div>{{ rangeText }}</div>
      </div>
      <div class="item">
        <div class="label">实体类别</div>
        <div>
          <lls-radio-group v-model="entityType">
            <lls-radio v-for="i in entityTypes" :key="i.type" :label="i.type">{{ i.name }}</lls-radio>
          </lls-radio-group>
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <lls-button v-if="editMode" type="primary" plain @click="handleDelete">删除</lls-button>
      <lls-button type="primary" plain @click="handleClose">取消</lls-button>
      <lls-button type="primary" @click="handleSubmit">确定</lls-button>
    </span>
  </lls-dialog>
</template>

<script>
export default {
  props: {
    visible: Boolean,
    text: String,
    range: Array,
    relations: Array,
    entityTypes: Array,
    entityId: Number,
    entity: Array || null,
  },

  inject: ['emitEvent'],

  data () {
    return {
      entityType: ''
    }
  },

  computed: {
    editMode () {
      return !!this.entity
    },
    rangeText () {
      console.log(this.editMode)
      console.log(this.text)
      return this.editMode
        ? this.text.slice(this.entity[2][0][0], this.entity[2][0][1] + 1)
        : this.text.slice(this.range[0], this.range[1] + 1)
    }
  },

  watch: {
    entity () {
      this.setEntityType()
    },
    // 同时监听 entity visible 会导致 setEntityType 可能执行两次
    visible () {
      if (this.visible) {
        this.setEntityType()
      }
    }
  },

  methods: {
    setEntityType () {
      if (this.entity) {
        this.entityType = this.entity[1]
      } else {
        this.entityType = ''
      }
    },
    handleClose () {
      this.$emit('update:visible', false)
      this.entityType = ''
    },
    handleSubmit () {
      if (!this.entityType) {
        this.$message.error('实体类型不能为空')
        return
      }
      if (this.editMode) {
        const id = this.entity[0]
        const info = [
          id,
          this.entityType,
          [[...this.entity[2][0]]],
          this.entity[3]
        ]
        if (this.hasRelation(id)) {
          this.$message.error('该实体存在关联关系，无法修改！')
          return
        }
        this.emitEvent('modify-entity', id, info)
      } else {
        const info = [
          'T' + this.entityId,
          this.entityType,
          [[...this.range]],
          this.rangeText
        ]
        this.emitEvent('add-entity', info)
      }
      this.handleClose()
    },
    handleDelete () {
      const id = this.entity[0]
      if (this.hasRelation(id)) {
        this.$message.error('该实体存在关联关系，无法删除！')
        return
      }
      this.emitEvent('delete-entity', id)
      this.handleClose()
    },
    hasRelation (id) {
      const relation = this.relations.find(i => {
        if (i[2][0][1] === id || i[2][1][1] === id) {
          return true
        }
      })
      return relation ? true : false
    }
  }
}
</script>

<style lang="stylus" scoped>
.content {
  .item {
    display: flex;
    & + .item {
      margin-top: 20px;
    }
    .label {
      flex-shrink: 0;
      width: 50px;
      text-align: right;
      margin-right: 20px;
      color: #666;
    }
    .lls-radio {
      display: block;
      & + .lls-radio {
        margin-top: 16px;
      }
    }
  }
}
</style>